<template>
  <div>
    <h2>{{state.count}}</h2>
    <h3>{{num.value}}</h3>
    <a-button @click="add" style="width:120px;">计算</a-button>
    <!-- <YourComponent v-model="name"></YourComponent> -->
    <div></div>
    <a-button @click="toRouter" style="margin-top: 20px">child</a-button>
    <div id="mount-point"></div>
  </div>
</template>
<script lang="ts">
import { reactive } from 'vue'
import { Options, Vue } from 'vue-class-component'
import YourComponent from '@/components/YourComponent.vue'
@Options({
  components: {
    YourComponent
  }
})
export default class Demo2 extends Vue {
  state = reactive({
    count: 1
  })

  num = reactive({
    value: 0
  })

  add ():void {
    this.state.count++
    this.num.value += 2
  }

  join (first: number, second: number): number {
    return first + second
  }

  toRouter ():void {
    this.$router.push({ path: '/demo4/child', query: { id: 1 } })
  }
}
// import { reactive, ref, computed } from 'vue'
// export default {
//   setup () {
//     // 1.响应式变量声明 reactive负责复杂数据结构，
//     const state = reactive({
//       count: 1
//     })
//     // 2.ref可以把基本的数据结构包装成响应式
//     const num = ref(0)
//     // 3.创建只读的计算属性
//     const computedEven1 = computed(() => state.count % 2)
//     // 4.创建可读可写的计算属性
//     const computedEven2 = computed({
//       get: () => {
//         return state.count % 2
//       },
//       set: newVal => {
//         state.count = newVal
//       }
//     })

//     // 事件的声明
//     function add () {
//       state.count++
//       num.value += 2
//     }

//     function handleClick () {
//       computedEven2.value = 10
//     }

//     return {
//       state,
//       add,
//       num,
//       computedEven1,
//       computedEven2,
//       handleClick
//     }
//   }
// }
</script>
<style lang="sass" scoped>

</style>
